<template>
  <div class="wrapper">
    <list class="list" @scroll="scroll" >
      <cell class="cell" v-for="(list,i) in lists" :key="i">
        <div class="panel" :ref="'item' + i">
          <text class="text">{{list.title}}</text>
        </div>
      </cell>
    </list>
    <div class="message" v-if="show">
      <text class="image">&#xe932;</text>
      <text class="point"> {{ cell }} 条消息</text>
    </div>
    <div class="sendMessage">
      <input ref="input" type="text" class="input" v-model="message" value="" />
      <text class="button" @click="send">发送</text>
    </div>
  </div>
</template>

<script>
const modal = weex.requireModule('modal')
const dom = weex.requireModule('dom')
const stream = weex.requireModule('stream')

export default {
  data () {
    return {
      message: '测试测试测试测试测试测试测试测试测试测试',
      lists: [],
      show: false,
      state: true,
      number: 0,
      cell:0,
    }
  },
  created () {
    let url = "url('//at.alicdn.com/t/font_587502_l6y4kjpecjq93sor.ttf')"
      dom.addRule('fontFace', {
        'fontFamily': 'iconfont2',
        'src': url
      })
    // setInterval(() => {
    //   stream.fetch(
    //     {
    //       method: 'GET',
    //       url: 'https://api.myjson.com/bins/74l63',
    //       type: 'json'
    //     },
    //     (res) => {
    //       var str = '测试测试测试测试测试测试测试测试测试测试'
    //       str = str.slice(Math.random() * 10)
    //       this.lists.push({title: str})
    //       if(this.lists.length > 3) {
    //         this.scrollTo(this.lists.length)
    //       }
    //     }
    //   )
    // }, 1000)
  },
  computed: {

  },
  methods: {
    scroll () {

    },
    send () {
      if(this.message == '') return
      this.cell = this.lists.length - this.number
      this.lists.push({title: this.message})
      if(this.state == true) {
        this.number = this.lists.length
        if(this.lists.length > 2 && this.show == false) {
          this.scrollTo(this.lists.length)
        }
      }
    },
    scrollTo (num) {
      let str = `item${num - 2}`
      const el = this.$refs[`${str}`][0]
      dom.scrollToElement(el, {})
    }
  }
}
</script>

<style scoped>
  .wrapper {
    position: relative;
  }
  .message {
    position: fixed;
    bottom: 250;
    left: 20;
    border-width: 1px;
    border-color: red;
    border-style: solid;
    width: 200px;
    flex-direction: row;
    height: 55px;
    opacity: 0.3;
  }
  .list {
    position: fixed;
    bottom: 250;
    font-size: 50px;
    width: 500px;
    height: 300px;
    margin-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    color: #666666;
    border-width: 2px;
    border-style: solid;
    border-color: #41B883;
  }
  .title {
    width: 450px;
    background-color: gray;
    opacity: 0.3;
  }
  .point {
    font-size: 30px;
    padding-top: 7px;
  }
  .sendMessage {
    flex-direction: row;
    position: fixed;
    bottom: 150;
    width: 750px;
  }
  .input {
    font-size: 40px;
    height: 60px;
    width: 500px;
    margin-left: 20px;
    border-style: solid;
    border-color: red;
    border-width: 1px;
  }
  .button {
    width: 100px;
    height: 50px;
    background-color: black;
    color: white;
    text-align: center;
    margin-left: 20px;
    margin-top: 5px;
    padding-top: 8px;
  }
  .panel {
    border-width: 1px;
    border-style: solid;
    border-color: red;
    margin-bottom: 10px;
  }
  .text {
    lines: 2;
    font-size: 32px;
  }
  .image {
    font-family: iconfont2;
    font-size:50px;
  }
</style>